<template>
  <view class="preview_container">
    <view class="home_top_bg"
      :style="'height:' + topBarHeight + 'px;margin-top:' + topBarHeight + 'px'">
      <!-- #ifndef MP-TOUTIAO -->
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px'">
        <view class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px'">
          <img :src="staticUrl() + '/carts/back.png'" alt="" class="back" @click="clickBack" />
          <text>确认订单</text>
        </view>
      </view>
      <!-- #endif -->
    </view>

    <view class="address" :style="'margin-top:' + (topBarHeight+20) + 'px'">
      <view class="one_line">
        <text>{{ name }}</text>
        <text>{{ phone }}</text>
      </view>
      <view class="two_line">
        <image :src="staticUrl() + '/carts/position.png'" mode="aspectFit"></image>
        <text>{{ address }}</text>
      </view>
      <view class="three_line">
        按国家GSP规定，收货地址需要和药品经营许可证上地址一致，填写后如需要更改请联系客服人员
      </view>
      <view class="four_line">
        <img :src="staticUrl() + '/carts/line.png'" alt="" />
      </view>
    </view>

    <view class="logisticsTips">
      物流配送方式陕西省内京东快递，陕西省外中通快递。如有疑问请咨询客服！
    </view>

    <!-- <view class="goodsList">
      <view class="goods">
        <view v-for="(i, ins) in temporary_list" :key="ins" class="recommend_item">
          <view class="title" v-if="i.goodsSku.goodsType === 'PORTFOLIO'">
            <view>组合套餐</view>
            <view @click="clickOtherGoods(i)">
              商品明细
              <img :src="staticUrl() + '/carts/moreRule.png'" class="more" />
            </view>
          </view>
          <view class="item">
            <view>
              <view class="original">
                <ImageCache :src="
                    i.goodsSku.original ? i.goodsSku.original : staticUrl() + '/home/defaultImg.png'
                  " />
              </view>
            </view>
            <view style="width: 100%" class="singleRowEllipsis">
              <view class="goodsName singleRowEllipsis">{{ i.goodsSku.goodsName }}</view>
              <view class="simpleSpecs singleRowEllipsis">规格：{{ i.goodsSku.simpleSpecs || '' }}
              </view>
              <view class="expirationDate">
                <img :src="staticUrl() + '/home/expirationDate.png'" class="_icon" />
                <text>{{ i.goodsSku.expirationDate || '' }}</text>
              </view>
              <view class="manufacturer singleRowEllipsis">
                <img :src="staticUrl() + '/home/manufacturer.png'" class="_icon" />
                <text>{{ i.goodsSku.manufacturer || '' }}</text>
              </view>
              <view>
                <text class="ephedrine" v-if="i.goodsSku.ephedrine">含麻</text>
                <text class="activityType" v-if="i.promotion">
                  {{ promotionType(i.promotion.promotionType) }}
                </text>
              </view>
              <view class="prices">
                <view>
                  ￥{{ i.goodsSku.price }}
                  <text v-if="i.goodsSku.goodsType !== 'PORTFOLIO'">
                    /{{ i.goodsSku.goodsUnit || '' }}</text>
                  <text v-else>/{{ i.goodsPromotionVO.goodsUnit || '' }}</text>
                </view>
                <text>x{{ i.num }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="more" @click="more" v-if="goods_list.length > 2">
          <text>{{ openArrowText }}</text>
          <image :src="staticUrl() + openArrow" mode="aspectFit"></image>
        </view>
      </view>
    </view> -->

    <view :class="openArrowText==='收起'?'moreRule':'putAway'">
      <Item v-for="(item,index) in skuList_temporary" :key="index" :goods="item" :preview="false"
        @otherGoods="clickOtherGoods" ref="child">
      </Item>
    </view>
    <view class="more" @click="more">
      <text>{{ openArrowText }}</text>
      <image :src="staticUrl() + openArrow" mode="aspectFit"></image>
    </view>

    <view class="gift" v-if="giftList.length">
      <text>礼品</text>
      <view v-if="!giftStatus" @click=";(giftStatus = true), (other_goods_length = true)">
        <text class="text">{{ gift }}</text>
        <image :src="staticUrl() + '/carts/moreCoupon.png'" mode="aspectFit"></image>
      </view>
    </view>

    <view class="remark">
      <text>备注</text>
      <view v-if="!remark" @click=";(remarkStatus = true), (other_goods_length = true)">
        <text class="text">无备注</text>
        <image :src="staticUrl() + '/carts/moreCoupon.png'" mode="aspectFit"></image>
      </view>
      <view v-else @click="remarkStatus = true" class="singleRowEllipsis" style="max-width: 80%">
        <text class="text">{{ remark }}</text>
      </view>
    </view>

    <view class="promotePhoneNumber" v-if="!promotePhoneStatus">
      <text>推荐人</text>
      <input v-model="promotePhoneNumber" placeholder="请输入手机号" maxlength="11" />
      <image :src="staticUrl() + '/carts/icon.png'" mode="aspectFit" @click="clickScan"></image>
    </view>

    <view class="payment">
      <view>
        <text>商品总计</text> <text class="price">￥{{ goodsPrice }}</text>
      </view>
      <view>
        <text>运费</text> <text class="price">￥{{ freightPrice }}</text>
      </view>
      <view>
        <text>优惠</text> <text class="price">-￥{{ discountPrice }}</text>
      </view>
      <view>
        <text>优惠券</text>
        <view v-if="!couponList.length" class="coupon_view">
          <text class="coupon" style="color: #808080"> 无可用 </text>
          <image :src="staticUrl() + '/carts/moreCoupon.png'" mode="aspectFit"></image>
        </view>
        <view class="prices" v-if="couponList.length" @click="clickApplyCoupon()">
          <text class="coupon" v-if="!couponNum"> 有可使用优惠券{{ couponList.length }}张 </text>
          <text class="coupon" v-else>-{{ couponNum }} </text>
          <image :src="staticUrl() + '/carts/moreCoupon.png'" mode="aspectFit"></image>
        </view>
      </view>
      <view class="payment_last_view">
        应付金额：<text class="price">￥{{ flowPrice }}</text>
      </view>
    </view>

    <view style="height: 220rpx"></view>

    <view class="tips" v-if="tips">{{ tips }}</view>

    <view class="cartsBottom">
      <view class="total">
        合计：<text> ￥{{ flowPrice }} </text>
      </view>
      <view class="buttons" @click="preview">提交订单</view>
    </view>

    <!-- 优惠券 使用 -->
    <view class="couponUse" v-if="couponStatus">
      <view class="data">
        <view class="title">
          <text>优惠券</text>
          <img :src="staticUrl() + '/home/close.png'" alt="" @click="closeCoupon()" />
        </view>
        <view style="height: 740rpx; overflow-y: auto">
          <Coupon v-for="item in couponList" :key="item.id" :couponItem="item" :settlement="true">
            <template v-slot:settlementCheck>
              <checkbox v-model="item.checked" :checked="item.checked" class="checkbox"
                @click="selectCoupon(item)" />
            </template>
          </Coupon>
        </view>
      </view>
    </view>

    <!-- 备注 -->
    <view class="remarkStatus" v-if="remarkStatus">
      <view class="data">
        <view class="title">
          <text>订单备注</text>
          <img :src="staticUrl() + '/home/close.png'"
            @click=";(remarkStatus = false), (other_goods_length = false)" />
        </view>
        <view class="textarea">
          <textarea placeholder="请输入内容" v-model="remark" @input="sumfontnum"
            placeholder-style="font-size:28rpx;color:#ADADAD;" :maxlength="maxlength">
          </textarea>
          <text class="text2">{{ fontNum }}/{{ maxlength }}</text>
        </view>
      </view>
    </view>

    <!-- 礼品 -->
    <view class="giftStatus" v-if="giftStatus"
      @click.stop=";(giftStatus = false), (other_goods_length = false)">
      <view class="data">
        <view class="title">
          <text>福利商品</text>
          <image :src="staticUrl() + '/home/close.png'"
            @click.stop=";(giftStatus = false), (other_goods_length = false)" />
        </view>
        <view style="height: 736rpx; overflow: auto">
          <view class="list" v-for="(item, index) in giftList" :key="index"
            @click="selectGift(item)">
            <image :src="item.original ? item.original : staticUrl() + '/home/defaultImg.png'">
            </image>
            <view class="info">
              <text class="name">{{ item.title }}</text>
              <text class="goodsName">{{ goodsNameAggregate(item.skuList) }}</text>
              <text class="price">礼品价值：{{ giftPrice(item.skuList) }}元</text>
            </view>
            <checkbox v-model="item.checked" :checked="item.checked" class="checkbox" />
          </view>
        </view>
      </view>
    </view>

    <!-- 提交确认 弹窗 -->
    <Dialog :dialog="dialog" :content="content" @confirm="dialogConfirm" @cancel="dialogCancel">
    </Dialog>

    <view class="dialog_expirationDate" v-if="dialogChecked">
      <view class="dialog_box">
        <view class="title"> 提示</view>
        <view class="content" @click="confirmMessageChecked = !confirmMessageChecked">
          <checkbox :checked="confirmMessageChecked"> </checkbox>
          <text>{{ confirmMessage }}</text>
        </view>
        <view class="btn">
          <text class="cancelText" @click="dialogChecked = false">取消</text>
          <text :class="confirmMessageChecked ? 'confirmText' : 'confirmText2'"
            @click="dialogConfirm">
            确认
          </text>
        </view>
      </view>
    </view>

    <!-- 组合套餐 其他商品 弹窗 -->
    <view class="combinationGoods" v-if="other_goods.length" @click="closeCombinationGoods">
      <view class="box">
        <view class="title">
          <text>组合套餐列表</text>
          <img :src="staticUrl() + '/home/close.png'" @click="closeCombinationGoods" />
        </view>
        <view v-for="(i, j) in other_goods" :key="j" class="combinationGoods_item">
          <image :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'"></image>
          <view class="combinationGoods_right">
            <view class="goodsName singleRowEllipsis" @click="clickGoodsInfo(i.id)">
              {{ i.goodsName }}
            </view>
            <view class="simpleSpecs singleRowEllipsis">规格：{{ i.simpleSpecs || '' }} </view>
            <view class="expirationDate">
              <img :src="staticUrl() + '/home/expirationDate.png'" class="_icon" />
              <text>{{ i.expirationDate }}</text>
            </view>
            <view class="manufacturer singleRowEllipsis">
              <img :src="staticUrl() + '/home/manufacturer.png'" class="_icon" />
              <text>{{ i.manufacturer }}</text>
            </view>
            <view style="margin-top: 10rpx">
              <span class="ephedrine" v-if="i.ephedrine">含麻</span>
            </view>
            <view class="originalPrice">
              <text>￥</text>
              <text>{{ i.originalPrice.toFixed(2) }}</text>
              <text>/{{ i.goodsUnit || '' }}</text>
              <view>x {{ i.num }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { checkOrder, calculateAmount, getMemberExtensionStatus, createTransaction, getCombinationProducts } from '@/api/carts/index.js'
import Dialog from '@/components/dialog'
import dicts from '@/config/dicts.js'
import { calculate } from '@/utils/util.js'
import Coupon from '@/components/coupon/coupon.vue'

import Item from "@/pages/shoppingCarts/item.vue"



export default {
  components: { Dialog, Coupon, Item },
  data () {
    return {
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      name: '',
      phone: '',
      address: '',
      skuList_temporary: [],
      goods_list: [],
      temporary_list: [],
      openArrowText: '全部打开',
      openArrow: '/carts/moreRule.png',
      goodsPrice: '',
      discountPrice: '',
      freightPrice: '',
      flowPrice: '',
      couponList: [],
      tips: '',
      couponStatus: false,
      couponNum: '',
      couponId: '',
      fontNum: 0,
      maxlength: 200,
      remark: '',
      remarkStatus: false,
      promotePhoneNumber: '',
      promotePhoneStatus: false,
      dialog: false,
      other_goods: [],
      other_goods_length: false,
      giftList: [],
      giftStatus: false,
      gift: '',
      presentId: '',
      confirmMessage: '',
      confirmMessageChecked: false,
      dialogChecked: false,
      content: '',
      couponDialog: false,
      currentCoupon: ''
    }
  },
  methods: {
    calculate,
    selectGift (val) {
      this.giftList.forEach(i => {
        if (val.id != i.id) {
          i.checked = false
        }
      })
      val.checked = !val.checked
      if (val.checked) {
        this.presentId = val.id
        this.gift = val.title
      } else {
        this.gift = '请选择'
        this.presentId = ''
      }
    },
    goodsNameAggregate (val) {
      let a = ''
      val.forEach(el => {
        a += el.goodsName + ' ' + el.simpleSpecs + '、'
      })
      return a.slice(0, a.length - 1)
    },
    giftPrice (val) {
      let a = 0
      val.forEach(el => {
        a += el.num * el.originalPrice
      })
      return a.toFixed(2)
    },
    promotionType (val) {
      return dicts.goods_promotionType[val]
    },
    closeCombinationGoods () {
      this.other_goods = []
      this.other_goods_length = false
    },
    clickOtherGoods (val) {
      this.other_goods_length = true
      getCombinationProducts(val.goodsSku.skuId).then(res => {
        if (res.code === 200) {
          this.other_goods = res.data
        }
      })
    },
    dialogCancel () {
      this.dialog = false
      this.currentCoupon.checked = true
    },
    clickApplyCoupon () {
      this.couponStatus = true
      this.other_goods_length = true
    },
    // dialog 确定按钮
    dialogConfirm () {
      if (this.currentCoupon) {
        this.dialog = false
        this.closeCoupon()
        return
      }

      createTransaction({
        // #ifdef MP-WEIXIN
        client: 'WECHAT_MP',
        // #endif
        // #ifdef MP-TOUTIAO
        client: 'DOUYIN_MP',
        // #endif
        // #ifndef MP
        client: 'APP',
        // #endif
        way: 'CART',
        couponId: this.couponId,
        remark: this.remark,
        promotePhoneNumber: this.promotePhoneNumber,
        presentId: this.presentId
      }).then(res => {
        if (res.code === 200) {
          uni.navigateTo({
            url: '/pages/cashier/index?sn=' + res.data.sn
          })
        }
      })
    },
    // 扫码
    clickScan () {
      wx.scanCode({
        onlyFromCamera: false,
        scanType: ['qrCode'],
        success: res => {
          // '码内容：'
          this.promotePhoneNumber = JSON.parse(res.result).mobile
        },
        fail: () => {
          //扫码失败后
          wx.showToast({
            title: '扫码失败',
            icon: 'loading',
            duration: 1500
          })
        }
      })
    },
    // 提交订单
    preview () {
      this.confirmMessageChecked = false
      if (this.confirmMessage) {
        this.dialogChecked = true
      } else {
        this.dialog = true
        this.content = '您好！请确定您购买的商品的数量和效期！'
      }
    },
    // 统计字数
    sumfontnum (e) {
      this.fontNum = e.detail.value.length
    },
    // 关闭
    closeCoupon () {
      this.couponStatus = false
      this.other_goods_length = false
      let a = this.couponList.filter(i => {
        return i.checked
      })
      if (a.length) {
        this.couponNum = a[0].price
        this.couponId = a[0].id
      } else {
        this.couponNum = ''
        this.couponId = ''
      }
      calculateAmount(this.couponId).then(res => {
        if (res.code === 200) {
          let c = res.data
          this.goodsPrice = c.goodsPrice
          this.discountPrice = c.discountPrice
          this.couponNum = c.couponPrice
          this.freightPrice = c.freightPrice
          this.flowPrice = c.flowPrice
        }
      })
    },
    // 确定优惠券
    determine () {
      this.couponStatus = false
      let a = this.couponList.filter(i => {
        return i.checked
      })
      if (a.length) {
        this.couponNum = a[0].price
        this.couponId = a[0].id
      } else {
        this.couponNum = ''
        this.couponId = ''
      }
      calculateAmount(this.couponId).then(res => {
        if (res.code === 200) {
          let c = res.data
          this.goodsPrice = c.goodsPrice
          this.discountPrice = c.discountPrice
          this.couponNum = c.couponPrice
          this.freightPrice = c.freightPrice
          this.flowPrice = c.flowPrice
        }
      })
    },
    // 选中优惠券
    selectCoupon (val) {
      this.couponList.forEach(i => {
        if (val.id != i.id) {
          i.checked = false
        }
      })
      val.checked = !val.checked
      if (!val.checked) {
        this.currentCoupon = val
        this.content = '确定取消使用优惠券吗？'
        this.dialog = true
        this.couponDialog = true
      } else {
        this.currentCoupon = ''
      }
    },
    // 查看更多
    more () {
      if (this.openArrowText === '收起') {
        this.openArrowText = '全部打开'
        this.openArrow = '/carts/moreRule.png'
      } else {
        this.openArrowText = '收起'
        this.openArrow = '/carts/putAway.png'
      }
    },
    // 点击返回
    clickBack () {
      uni.navigateBack({
        delta: 1
      })
    },
    // 获取数据
    getList () {
      checkOrder().then(res => {
        if (res.code === 200) {
          let a = res.data.purchaserAddress
          let b = res.data
          let c = res.data.priceDetailDTO
          this.tips = res.data.tips
          this.name = a.name
          this.phone = a.mobile
          this.address = a.consigneeAddressPath + a.detail

          // 商品列表
          this.skuList_temporary = res.data.groups

          this.goodsPrice = c.goodsPrice
          this.discountPrice = c.discountPrice
          this.freightPrice = c.freightPrice
          this.flowPrice = c.flowPrice

          this.confirmMessage = b.confirmMessage

          // 礼品
          this.giftList = res.data.presentList || []
          this.giftList.forEach(e => {
            this.$set(e, 'checked', false)
            if (
              e.consumeThreshold ===
              Math.max.apply(
                null,
                this.giftList
                  .filter(item => {
                    return this.flowPrice > item.consumeThreshold
                  })
                  .map(item => {
                    return item.consumeThreshold
                  })
              )
            ) {
              e.checked = true
              this.gift = e.title
              this.presentId = e.id
            }
          })
          // 优惠券
          if (res.data.couponList.length > 0) {
            res.data.couponList.forEach((item, index) => {
              if (index) {
                this.$set(item, 'checked', false)
              } else {
                this.$set(item, 'checked', true)
              }
            })
          }
          this.couponList = res.data.couponList
          if (this.couponList.length) {
            this.determine()
          }
        }
        if (res.code === 400) {
          uni.switchTab({ url: '/pages/shoppingCarts/index' })
        }
      })
      // 推荐
      getMemberExtensionStatus().then(res => {
        if (res.code === 200) {
          this.promotePhoneStatus = res.data
        }
      })
    },
    setTime (val) {
      return val.split(' ')[0].replace(/-/g, '.')
    },
    startTime (val) {
      let startTime = new Date(val)
      return (
        startTime.getFullYear() +
        '.' +
        (startTime.getMonth() + 1 < 10
          ? '0' + (startTime.getMonth() + 1)
          : startTime.getMonth() + 1) +
        '.' +
        (startTime.getDate() < 10 ? '0' + startTime.getDate() : startTime.getDate())
      )
    },
    endTime (val) {
      let endTime = new Date(val)
      return (
        endTime.getFullYear() +
        '.' +
        (endTime.getMonth() + 1 < 10 ? '0' + (endTime.getMonth() + 1) : endTime.getMonth() + 1) +
        '.' +
        (endTime.getDate() < 10 ? '0' + endTime.getDate() : endTime.getDate())
      )
    }
  },
  onShow () {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.tabBarHeight + self.stateBarHeight
        // #endif
        // #ifdef MP-TOUTIAO
        self.stateBarHeight = 0
        self.topBarHeight = 20
        // #endif
      }
    })
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.prevent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.dialog_expirationDate {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  background: rgba($color: #000000, $alpha: 0.2);

  .dialog_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 615rpx;
    height: 279rpx;
    background: #ffffff;
    border-radius: 11rpx;

    .title {
      font-size: 42rpx;
      padding: 40.28rpx 0 27.08rpx;
      text-align: center;
    }

    .content {
      font-size: 28rpx;
      color: #f0241d;
      padding-bottom: 25.69rpx;
      text-align: center;
    }

    .btn {
      padding: 0 46.84rpx;
      display: flex;
      justify-content: space-between;

      text {
        display: inline-block;
        width: 236.11rpx;
        height: 57.64rpx;
        line-height: 57.64rpx;
        border-radius: 50rpx;
        text-align: center;
        font-size: 29rpx;
      }

      .cancelText {
        color: #2871fc;
        border: 1px solid #2871fc;
      }

      .confirmText {
        color: #fff;
        background: #2871fc;
      }

      .confirmText2 {
        color: #fff;
        background: #b1b1b1;
      }
    }
  }
}

.combinationGoods {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1000;

  .box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: #f9f9f9;
    z-index: 1000;
    border-radius: 22rpx 22rpx 0rpx 0rpx;
    overflow: hidden;
    overflow-y: auto;

    .title {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      height: 97rpx;
      background: #fff;
      line-height: 97rpx;

      text {
        display: inline-block;
        font-size: 33.33rpx;
        font-weight: bold;
        width: 100%;
        text-align: center;
        // margin-top: 35rpx;
      }

      img {
        width: 20rpx;
        height: 20rpx;
        position: absolute;
        right: 50rpx;
        top: 38rpx;
      }
    }

    .combinationGoods_item {
      // padding: 13.89rpx;
      // margin-bottom: 13.89rpx;
      margin: 13.89rpx;
      background: #ffffff;
      min-height: 331rpx;
      height: 360rpx;
      border-radius: 11rpx;
      display: flex;

      image {
        width: 194rpx;
        height: 194rpx;
        margin: 61.11rpx 59.03rpx 75.69rpx 37.5rpx;
      }

      .combinationGoods_right {
        width: 50%;
        padding-top: 54.86rpx;
      }

      .goodsName {
        font-size: 29rpx;
        font-weight: 400;
        margin-bottom: 19.44rpx;
      }

      .simpleSpecs,
      .expirationDate,
      .manufacturer {
        font-size: 21rpx;
        font-weight: 400;
        color: #8d8d8d;

        ._icon {
          width: 19rpx;
          height: 19rpx;
          margin: 0;
          margin-right: 7.64rpx;
        }
      }

      .expirationDate,
      .manufacturer {
        margin-top: 14.58rpx;
      }

      .originalPrice {
        color: #ef231b;
        margin-top: 24.72rpx;
        line-height: 50rpx;

        text:nth-child(1) {
          font-size: 25rpx;
        }

        text:nth-child(2) {
          font-size: 33rpx;
        }

        text:nth-child(3) {
          font-size: 25rpx;
          color: #8d8d8d;
          margin-left: 6rpx;
        }

        view {
          float: right;
          font-size: 25rpx;
          color: #8d8d8d;
          margin-top: 4rpx;
        }
      }
    }
  }
}

.couponUse {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);

  .checkbox {
    position: absolute;
    top: 38rpx;
    right: 26rpx;
    transform: scale(1.7);
  }

  .data {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    height: 833rpx;
    background: #f9f9f9;
    border-radius: 22rpx 22rpx 0rpx 0rpx;

    .title {
      height: 97rpx;
      line-height: 95rpx;
      font-size: 36rpx;
      background: #fff;
      text-align: center;
      font-weight: bold;
      border-radius: 22rpx 22rpx 0rpx 0rpx;
      position: relative;
      margin-bottom: 25rpx;

      img {
        position: absolute;
        top: 20rpx;
        right: 38rpx;
        width: 19.44rpx;
        height: 19.44rpx;
        padding: 20rpx;
      }
    }

    .bottom {
      width: 100%;
      height: 150rpx;

      text {
        display: block;
        height: 80rpx;
        line-height: 78rpx;
        font-size: 29rpx;
        color: #ffffff;
        text-align: center;
        background: #2871fc;
        border-radius: 40rpx;
        margin: 0 36.11rpx;
      }
    }
  }
}

.preview_container {
  width: 100%;
  overflow: hidden;
  background: #f5f5f5;
  min-height: 100vh;
}

.tips {
  width: 100%;
  height: 69rpx;
  line-height: 68rpx;
  font-size: 24rpx;
  position: fixed;
  bottom: 106rpx;
  left: 0;
  z-index: 1000;
  background: #e4ebf9;
  padding-left: 47.22rpx;
}

.cartsBottom {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 106rpx;
  line-height: 105rpx;
  background: #fff;
  font-size: 30rpx;
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid rgba($color: #c5c5c5, $alpha: 0.2);

  .total {
    font-weight: bold;
    margin-left: 30rpx;

    text {
      color: #ec1818;
    }
  }

  .buttons {
    width: 200rpx;
    height: 56rpx;
    line-height: 56rpx;
    color: #fff;
    background: #2871fc;
    text-align: center;
    border-radius: 28rpx;
    margin-right: 30rpx;
    margin-top: 25rpx;
  }
}

.promotePhoneNumber {
  background: #ffffff;
  border-radius: 11rpx;
  margin: 0 25rpx;
  margin-top: 20.83rpx;
  padding: 27.08rpx 22.22rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 29rpx;
  position: relative;

  text {
    white-space: nowrap;
  }

  input {
    display: inline-block;
    width: 100%;
    height: 53rpx;
    background: #f9f9f9;
    padding: 6rpx 60rpx 6rpx 40rpx;
    margin-left: 20rpx;
  }

  image {
    width: 37.78rpx;
    height: 37.78rpx;
    padding: 15rpx 40rpx;
    background: #f9f9f9;
  }
}

.payment {
  background: #fff;
  margin: 0 25rpx;
  margin-top: 20.83rpx;
  border-radius: 11rpx;
  padding: 45.83rpx 0 50rpx 0;

  view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 29rpx;
    margin-bottom: 32rpx;
    padding: 0 37.5rpx 0 22.22rpx;

    view {
      margin: 0;
    }

    .coupon_view {
      padding: 0;
    }

    .price {
      color: #ec1818;
      font-size: 33rpx;
      font-weight: bold;
    }

    .coupon {
      font-weight: bold;
    }

    .prices {
      color: #ec1818;
      padding-right: 0;
    }

    image {
      width: 9.72rpx;
      height: 15.28rpx;
      margin-left: 20rpx;
    }
  }

  .payment_last_view {
    justify-content: flex-end;
    margin-bottom: 0;
    border-top: 1px solid #f3f3f3;
    padding-top: 31.25rpx;
  }
}

.remark {
  background: #fff;
  border-radius: 11rpx;
  margin: 0 25rpx;
  margin-top: 20.83rpx;
  padding: 27.08rpx 22.22rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;

  image {
    width: 9.72rpx;
    height: 15.28rpx;
    margin-left: 20rpx;
  }
  .text {
    color: #666;
  }
}

.gift {
  background: #fff;
  border-radius: 11rpx;
  margin: 0 25rpx;
  margin-top: 20.83rpx;
  padding: 27.08rpx 22.22rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 29rpx;

  image {
    width: 9.72rpx;
    height: 15.28rpx;
    margin-left: 20rpx;
  }
}

.goodsList {
  background: #fff;
  margin: 0 25rpx;
  margin-top: 20.83rpx;
  border-radius: 11rpx;
  .goods {
    .recommend_item {
      border-bottom: 1px solid #f5f5f5;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 29.17rpx 23.61rpx 0 31.25rpx;

        view:nth-child(1) {
          width: 125rpx;
          height: 43rpx;
          background: #ffeae9;
          border-radius: 22rpx;
          font-size: 25rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ef231b;
          line-height: 43rpx;
          text-align: center;
        }

        view:nth-child(2) {
          font-size: 21rpx;
          display: flex;
          align-items: baseline;

          .more {
            width: 20rpx;
            height: 10rpx;
            margin-left: 18.06rpx;
            padding: 0;
          }
        }
      }

      .item {
        display: flex;
      }

      .original {
        width: 194rpx;
        height: 194rpx;
        background: #ffffff;
        padding: 34.72rpx 21rpx;
        margin: 44.44rpx 59.03rpx 58.33rpx 37.5rpx;
        box-sizing: border-box;
      }

      .goodsName {
        font-size: 29rpx;
        margin-top: 38.19rpx;
        margin-bottom: 19.44rpx;
      }

      .simpleSpecs {
        font-size: 21rpx;
        margin-bottom: 14.58rpx;
        color: #8d8d8d;
      }

      .expirationDate {
        font-size: 21rpx;
        margin-bottom: 14.58rpx;
        color: #8d8d8d;
      }

      ._icon {
        width: 20rpx;
        height: 20rpx;
        vertical-align: middle;
        margin-right: 7.64rpx;
      }

      .manufacturer {
        font-size: 20rpx;
        // margin-bottom: 14.58rpx;
        color: #8d8d8d;
      }

      .activityType {
        display: inline-block;
        font-size: 18rpx;
        color: #ef231b;
        border: 1px solid #ef231b;
        padding: 2rpx 8.6rpx;
        border-radius: 8rpx;
        // margin-top: 13.89rpx;
        margin-top: 16.89rpx;
        height: 22rpx;
        line-height: 20rpx;
      }

      .prices {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 20rpx 0;

        view {
          color: #ec1818;
          font-weight: bold;
          font-size: 30rpx;

          text {
            font-size: 25rpx;
            font-weight: normal;
            color: #8d8d8d;
            margin-left: 6.94rpx;
          }
        }

        text {
          font-size: 30rpx;
          color: #8d8d8d;
          margin-right: 38.89rpx;
        }
      }
    }
  }
}
.putAway {
  height: 400rpx;
  overflow: hidden;
}
.moreRule {
  height: 100%;
}
.more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28rpx 0;
  margin: 20rpx 20rpx;
  background: #fff;
  border-radius: 24rpx;
  text {
    font-size: 28rpx;
    font-weight: bold;
  }
  image {
    width: 18rpx;
    height: 12rpx;
    margin-left: 16rpx;
  }
}

.address {
  position: relative;
  background: #fff;
  margin: 0 25rpx;
  overflow: hidden;
  border-radius: 11rpx;

  .one_line {
    margin: 34rpx 20.83rpx 22.22rpx;
    font-weight: bold;

    text:nth-child(1) {
      font-size: 32rpx;
      margin-right: 22.22rpx;
    }
    text:nth-child(2) {
      font-size: 28rpx;
    }
  }

  .two_line {
    display: flex;
    margin: 0 10.42rpx;
    padding: 0 10.42rpx 20.83rpx 10.42rpx;
    font-size: 20rpx;
    border-bottom: 2rpx solid #f5f5f5;

    image {
      max-width: 20.14rpx;
      height: 25rpx;
      margin-right: 11.81rpx;
      margin-left: 5.42rpx;
    }

    text {
      opacity: 0.6;
    }
  }

  .three_line {
    font-size: 20rpx;
    margin: 20.83rpx 57.64rpx 45.83rpx 20.83rpx;
    color: #ec1818;
  }

  .four_line {
    position: relative;

    img {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 4rpx;
    }
  }
}

.remarkStatus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);

  .data {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    height: 801rpx;
    background: #fff;

    .title {
      height: 97rpx;
      line-height: 95rpx;
      font-size: 36rpx;
      text-align: center;
      font-weight: bold;
      border-radius: 22rpx 22rpx 0rpx 0rpx;
      position: relative;

      img {
        position: absolute;
        top: 20rpx;
        right: 38rpx;
        width: 19.44rpx;
        height: 19.44rpx;
        padding: 20rpx;
      }
    }

    .textarea {
      padding: 30rpx 20rpx;

      textarea {
        box-sizing: border-box;
        width: 100%;
        height: 275rpx;
        background: #f9f9f9;
        border-radius: 11rpx;
        padding: 30.56rpx 22.22rpx 50.56rpx;
      }

      .text2 {
        position: absolute;
        top: 355.33rpx;
        right: 49.31rpx;
        font-size: 25rpx;
        color: #adadad;
      }
    }
  }
}

.giftStatus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);

  .data {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    height: 833rpx;
    background: #f9f9f9;
    border-radius: 22rpx 22rpx 0rpx 0rpx;

    .title {
      height: 97rpx;
      line-height: 95rpx;
      font-size: 36rpx;
      background: #fff;
      text-align: center;
      font-weight: bold;
      border-radius: 22rpx 22rpx 0rpx 0rpx;
      position: relative;

      image {
        position: absolute;
        top: 20rpx;
        right: 38rpx;
        width: 19.44rpx;
        height: 19.44rpx;
        padding: 20rpx;
      }
    }

    .list {
      display: flex;
      align-items: center;
      padding: 49.31rpx 0;
      background: #ffffff;
      margin: 20.83rpx 0;
      position: relative;

      image {
        width: 181rpx;
        height: 181rpx;
        margin-left: 63.19rpx;
        margin-right: 58.33rpx;
      }

      .info {
        width: 50%;
        display: flex;
        flex-flow: column nowrap;

        text:nth-child(1) {
          font-size: 28rpx;
          font-weight: 500;
          color: #000000;
          margin-bottom: 17.36rpx;
        }

        text:nth-child(2) {
          font-size: 25rpx;
          font-weight: 400;
          color: #8d8d8d;
          margin-bottom: 17.36rpx;
        }

        text:nth-child(3) {
          font-size: 25rpx;
          font-weight: 400;
          color: #ec1818;
          margin-bottom: 17.36rpx;
        }

        text:nth-child(4) {
          font-size: 25rpx;
          font-weight: 400;
          color: #ec1818;
        }
      }

      .checkbox {
        position: absolute;
        right: 27.78rpx;
        bottom: 29.17rpx;
        transform: scale(1.4);
      }
    }
  }
}

.logisticsTips {
  font-size: 21rpx;
  font-weight: 400;
  color: #ef231b;
  line-height: 69rpx;
  height: 69rpx;
  background: #ffe9e8;
  margin: 20.83rpx 0;
  padding-left: 22.92rpx;
}

.home_top_bg {
  width: 100%;
  position: absolute;
  background: linear-gradient(to right, #2162fc, #46b0fa);
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;

  /* #ifdef MP-TOUTIAO */
  height: 50px !important;
  margin-top: 0 !important;
  /* #endif */

  .top_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background-size: 100%;
    background: linear-gradient(to right, #2162fc, #46b0fa);
    color: #fff;
    font-size: 32rpx;
  }

  .top_cont {
    display: flex;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;

    .back {
      width: 24rpx;
      height: 40rpx;
      margin-left: 14rpx;
    }

    text {
      font-size: 28rpx;
      margin-left: 35%;
    }
  }
}
</style>
